<template>
  <a-layout-sider :theme="sideTheme" :class="['side-menu','beauty-scroll', isMobile ? null : 'shadow']" width="200px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
    <!-- <div class="side_menu_icon" v-if="!drawerOpen">
      <a-icon type="menu-unfold" v-if="collapsed" @click="toggleCollapse"/>
      <a-icon type="menu-fold" v-else @click="toggleCollapse"/>
    </div> -->
    <i-menu :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect" class="menu"/>
<!--    <a-switch class="menu-swicth" size="small" checked-children="关闭" un-checked-children="展开" default-checked  @click="toggleCollapse"/>-->
  </a-layout-sider>
</template>

<script>
import IMenu from './menu'
import {mapState} from 'vuex'
export default {
  name: 'SideMenu',
  components: {IMenu},
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    drawerOpen: {
      type: Boolean,
      required: false,
      default: false
    },
    menuData: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    }
  },
  computed: {
    sideTheme() {
      return this.theme == 'light' ? this.theme : 'dark'
    },
    ...mapState('setting', ['isMobile', 'systemName'])
  },
  methods: {
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    },
    toggleCollapse () {
      this.$emit('toggleCollapse')
    },
  }
}
</script>

<style lang="less" scoped>
@import "index";
</style>
